<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>卷烟消费 -- 消费行为统计</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <style>
        .spinner {
            margin: 11px auto 0;
            height: 20px;
            text-align: center;
        }

        .spinner > div {
            width: 10px;
            height: 10px;
            background-color: #67CF22;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<button style="position: absolute; top: 5px;right: 20px;"
        class="btn btn-info" onclick="javascript:window.opener=null;window.open('','_self');window.close();">关闭</button>
<div class="container-fluid" id="app">
    <div class="row">
        <h4 class="col-sm-6 col-xs-9">烟草订单统计：</h4>
    </div>

    <form class="form-inline" style=" margin-bottom: 5px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="市局名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>


        <%--<div class="form-group">
            <input id="orderLevelInput" class="form-control input-sm" type="text" placeholder="档位名称">
        </div>--%>

        <div class="form-group">
            <select v-model="queryModel.payStatus" class="form-control input-sm" placeholder="支付状态">
                <option value="">--选择支付状态--</option>
                <option value="00">未支付</option>
                <option value="01">支付成功</option>
                <option value="02">付款中</option>
                <option value="99">支付失败</option>
            </select>
        </div>
        <button type="button" class="btn btn-sm btn-success" @click="getData();">查询</button>
    </form>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main1" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main2" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main3" style="margin-top: 10px;"></div>
    </div>

    <%--<div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main4" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-8 col-lg-8 main" id="main5" style="margin-top: 10px;"></div>
    </div>--%>
</div>
</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            queryModel : {
                cityName : '',
                quXianName : '',
                channelName : '',
                empName : '',
                payStatus : '',
                // OrderLevel : '',
            },


        },
        methods: {
            getData: function () {
                layer.load(1);
                var vm = this;
                this.setDataValue();
                $.ajax({
                    url: '${contextPath}/page/getSplOrderStatistics',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: vm.queryModel
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success) {
                            var main1Data = data.data.main1Data;
                            vm.updateMain1Data(main1Data);

                            var main2Data = data.data.main2Data;
                            vm.updateMain2Data(main2Data);

                            var main3Data = data.data.main3Data;
                            vm.updateMain3Data(main3Data);

                           /* var main4Data = data.data.main4Data;
                            vm.updateMain4Data(main4Data);

                            var main5Data = data.data.main5Data;
                            vm.updateMain5Data(main5Data);*/
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg("网络错误")
                    }
                })
            },
            updateMain1Data: function (main1Data) {
                if (!main1Data) return;
                var xData = main1Data.dayNum;
                var successPriceSum = main1Data.priceSum;
                var successCountNum = main1Data.countNum;


                var main1Option = {
                    color: ['#4690F7', '#A3D244'],
                    title: {
                        text: '最近七天趋势',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['订单','金额']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: xData
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '金额',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    }, {
                        type: 'value',
                        name: '订单',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} 笔'
                        }
                    }],
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '金额',
                        type: 'line',
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: successPriceSum
                    }, {
                        name: '订单',
                        type: 'line',
                        yAxisIndex: 1,
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: successCountNum
                    }]
                };



                myChart1.setOption(main1Option)
            },
            updateMain2Data: function (main2Data) {
                if (!main2Data) return;
                var xData = main2Data.dayNum;
                var successPriceSum = main2Data.priceSum;
                var successCountNum = main2Data.countNum;

                var main2Option = {
                    color: ['#4690F7', '#A3D244'],
                    title: {
                        text: '最近七周趋势',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['订单','金额']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: xData
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '金额',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    }, {
                        type: 'value',
                        name: '订单',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} 笔'
                        }
                    }],
                    series: [
                        {
                            // 根据名字对应到相应的系列
                            name: '金额',
                            type: 'line',
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    shadowColor: 'rgba(0,0,0,0.4)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 10
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                }
                            },
                            data: successPriceSum
                        }, {
                            // 根据名字对应到相应的系列
                            name: '订单',
                            type: 'bar',
                            yAxisIndex: 1,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                }
                            },
                            data: successCountNum
                        }]
                };

                myChart2.setOption(main2Option)
            },
            updateMain3Data: function (main3Data) {
                if (!main3Data) return;
                var xData = main3Data.dayNum;
                var successPriceSum = main3Data.priceSum;
                var successCountNum = main3Data.countNum;

                var main3Option = {
                    color: ['#4690F7', '#A3D244'],
                    title: {
                        text: '最近七月趋势',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['订单','金额']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: xData
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '金额',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    }, {
                        type: 'value',
                        name: '订单',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} 笔'
                        }
                    }],
                    series: [
                        {
                            // 根据名字对应到相应的系列
                            name: '金额',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                }
                            },
                            data: successPriceSum
                        }, {
                            // 根据名字对应到相应的系列
                            name: '订单',
                            type: 'bar',
                            yAxisIndex: 1,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                }
                            },
                            data: successCountNum
                        }]
                };
                myChart3.setOption(main3Option)
            },
            updateMain4Data: function (main4Data) {


                var main4Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '年龄购买分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['20岁', '30岁', '40岁', '50岁', '60岁', '其他']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: [0, 0, 0, 0, 0, 0]
                    }]
                }
                myChart4.setOption(main4Option)
                return
                if (!main4Data) return
                var orderCount = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                for (var index in main4Data) {
                    var data = main4Data[index]
                    var idx
                    switch (data.quantitySum) {
                        case '1包':
                            idx = 0
                            break;
                        case '2包':
                            idx = 1
                            break;
                        case '3-5包':
                            idx = 2
                            break;
                        case '6-9包':
                            idx = 3
                            break;
                        case '1条':
                            idx = 4
                            break;
                        case '1-2条':
                            idx = 5
                            break;
                        case '2条':
                            idx = 6
                            break;
                        case '2-5条':
                            idx = 7
                            break;
                        case '5-9条':
                            idx = 8
                            break;
                        case '10-20条':
                            idx = 9
                            break;
                        case '20条以上':
                            idx = 10
                            break;
                        default:
                            ;
                    }
                    orderCount[idx] = data.orderCount
                }
            },
            updateMain5Data: function (main5Data) {
                if (!main5Data) return
                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */

                var quantitySum = []
                var orderCount = []
                for (var index in main5Data) {
                    var data = main5Data[index]
                    quantitySum.push(data.quantitySum)
                    orderCount.push(data.orderCount)
                }

                var main5Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '购买变化次数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: quantitySum
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: orderCount
                    }]
                }
                myChart5.setOption(main5Option)
            },
            setDataValue : function () {
                var cityName = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();


               /* var custName = $("#custNameInput").val();
                var isExp = $("#isExp").val();
                var orderLevel = $("#orderLevelInput").val();
                var baseTypeName = $("#baseTypeNameInput").val();
                var cityType = $("#cityTypeInput").val();*/


                app.queryModel.cityName =cityName;
                app.queryModel.quXianName =quXianName;
                app.queryModel.channelName = channelName;
                app.queryModel.empName = empName;

            /*    app.queryModel.stringMap.custName = custName;
                app.queryModel.stringMap.isExp = isExp;
                app.queryModel.stringMap.orderLevel = orderLevel;
                app.queryModel.stringMap.baseTypeName = baseTypeName;
                app.queryModel.stringMap.cityType = cityType;*/

            },
            setInputValue : function (queryParams) {
                if (!queryParams) return;
                 $("#quXianNameInput").val(queryParams.quXianName ? queryParams.quXianName : '');
                 $("#channelNameInput").val(queryParams.channelName ? queryParams.channelName : '');
                 $("#empNameInput").val(queryParams.empName ? queryParams.empName : '');
                 app.queryModel.payStatus = queryParams.payStatus ? queryParams.payStatus : ''
            }
        },
    });


    $(".main").height($("#main1").width())
    var myChart1 = echarts.init($("#main1")[0])
    var myChart2 = echarts.init($("#main2")[0])
    var myChart3 = echarts.init($("#main3")[0])
    /*var myChart4 = echarts.init($("#main4")[0])
    var myChart5 = echarts.init($("#main5")[0])*/

     var queryParams = ${queryParams}
     //console.log(queryParams)
     app.setInputValue(queryParams);

    app.getData();

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">

    var selectEmpNameToSelected = function (channelName) {
        $.ajax({
            url: '${contextPath}/checking/selectEmpNameToSelected?channelName=' + channelName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#empNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectEmpNameToSelected('')

    var selectChannelNameToSelected = function (quXianName) {
        $.ajax({
            url: '${contextPath}/checking/selectChannelNameToSelected?quXianName=' + quXianName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#channelNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                            selectEmpNameToSelected(suggestion.value)
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectChannelNameToSelected('')
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
        $('#cityNameInput').autocomplete({
            lookup: [{data:'11520501', value:'贵安'},{data:'11520401', value:'安顺'},{data:'11522401', value:'毕节'},{data:'11520201', value:'六盘水'}],
            onSelect: function (suggestion) {
                //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                selectChannelNameToSelected(suggestion.value)
            },
            //width: 200,
            minChars: 0,
        });

    $.ajax({
        url: '${contextPath}/checking/selectQuXianNameToSelected',
        success: function (data) {
            if (data.success) {
                var countries = data.data
                $('#quXianNameInput').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        selectChannelNameToSelected(suggestion.value)
                    },
                    width: 200,
                    minChars: 0,
                });
            }
        }
    })
    </shiro:hasPermission>
    </shiro:lacksPermission>
    var selectOrderLevelToSelected = function () {
        $.ajax({
            url: '${contextPath}/checking/selectOrderLevelToSelected',
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#orderLevelInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        //width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    };
  //  selectOrderLevelToSelected();
</script>
</html>


